<template>
  <div class="rscc-table-page">
    <el-card>
      <div slot="header" class="clearfix">
        <span>固定资产</span>
      </div>
      <div class="filter-bar">
        <el-input v-model="filters.name" placeholder="资产名称" style="width: 120px; margin-right: 10px;" clearable />
        <el-select v-model="filters.type" placeholder="类型" style="width: 100px; margin-right: 10px;" clearable>
          <el-option label="房产" value="房产" />
          <el-option label="车辆" value="车辆" />
          <el-option label="电子" value="电子" />
        </el-select>
        <el-select v-model="filters.status" placeholder="现状" style="width: 100px; margin-right: 10px;" clearable>
          <el-option label="在用" value="在用" />
          <el-option label="闲置" value="闲置" />
          <el-option label="已出售" value="已出售" />
        </el-select>
        <el-button type="primary" @click="handleFilter">查询</el-button>
        <el-button @click="resetFilter">重置</el-button>
      </div>
      <el-table :data="pagedData" border stripe style="width: 100%; margin-top: 15px;">
        <el-table-column prop="photo" label="照片" width="80">
          <template slot-scope="scope">
            <el-avatar :src="scope.row.photo" size="small" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="资产名称" width="120" />
        <el-table-column prop="type" label="类型" width="100" />
        <el-table-column prop="buyDate" label="购入日期" width="120" />
        <el-table-column prop="value" label="价值(元)" width="100" />
        <el-table-column prop="status" label="现状" width="100" />
        <el-table-column prop="location" label="位置" width="120" />
        <el-table-column prop="remark" label="备注" />
      </el-table>
      <div style="margin-top: 15px; text-align: right;">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="filteredData.length"
          :page-size="pageSize"
          :current-page.sync="currentPage"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
const mockPhotos = [
  'https://img.icons8.com/color/48/000000/house.png',
  'https://img.icons8.com/color/48/000000/car.png',
  'https://img.icons8.com/color/48/000000/laptop.png',
  'https://img.icons8.com/color/48/000000/sofa.png',
];
export default {
  name: 'RsccGdzcView',
  data() {
    return {
      filters: { name: '', type: '', status: '' },
      currentPage: 1,
      pageSize: 2,
      tableData: [
        { name: '北京房产', type: '房产', buyDate: '2010-05-01', value: 3000000, status: '在用', location: '北京朝阳', photo: mockPhotos[0], remark: '自住房' },
        { name: '宝马轿车', type: '车辆', buyDate: '2018-08-10', value: 350000, status: '在用', location: '小区车库', photo: mockPhotos[1], remark: '日常代步' },
        { name: '苹果笔记本', type: '电子', buyDate: '2021-03-15', value: 12000, status: '在用', location: '家中书房', photo: mockPhotos[2], remark: '工作使用' },
        { name: '老旧沙发', type: '电子', buyDate: '2012-11-20', value: 2000, status: '闲置', location: '储藏室', photo: mockPhotos[3], remark: '已淘汰' },
      ]
    }
  },
  computed: {
    filteredData() {
      return this.tableData.filter(row => {
        const nameMatch = !this.filters.name || row.name.includes(this.filters.name);
        const typeMatch = !this.filters.type || row.type === this.filters.type;
        const statusMatch = !this.filters.status || row.status === this.filters.status;
        return nameMatch && typeMatch && statusMatch;
      });
    },
    pagedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.filteredData.slice(start, start + this.pageSize);
    }
  },
  methods: {
    handleFilter() {
      this.currentPage = 1;
    },
    resetFilter() {
      this.filters = { name: '', type: '', status: '' };
      this.currentPage = 1;
    }
  }
}
</script>
<style scoped>
.filter-bar { margin-bottom: 10px; }
.el-card { box-shadow: 0 2px 6px rgba(74,158,255,0.04) !important; }
.el-table { box-shadow: none !important; }
</style> 